<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link class="router-link" :to="{path: '/training/curriculum'}">课程列表</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>教案模板</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content search_form teacher_plan">
      <el-row>
        <el-col :span="12">
          <e-heading grade="1" style="margin: 0 0 50px;">教案模板</e-heading>
        </el-col>
        <el-col :span="12" style="text-align:right;">
          <router-link :to="{
            path:'/training/curriculum/setTem',
            query: this.$route.query
          }">
            <el-button>新增模板</el-button>
          </router-link>
        </el-col>
      </el-row>

      <p>请选择要使用的教案模板</p>
      <div v-loading="loading">
        <el-radio-group class="full-width" v-model="template">
          <el-radio :label="item" class="teach-template" 
            v-for="(item,index) in tempData.list" :key="item.id">
            <template-item :data="item" 
              @delete="handleDelete"></template-item>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="center" style="margin-top:40px;">
        <el-button type="primary" size="large" @click="setTeachTemplate()" :disabled="!template.id">确定</el-button>
      </div>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--
      <el-pagination
        v-bind="getPaginationProps(tempData)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      -->
    </div>
  </div>
</template>

<script>
import TemplateItem from './components/TemplateItem'
import { pagingList } from 'utils/mixins'
import api from 'api/train'
export default {
  mixins: [pagingList],
  components: {
    TemplateItem
  },
  data () {
    return {
      loading: false,
      template: {}, // 选中的模板
      tempData: {},
      page: 1,
      rows: 15,
      currentPage: 1,
      total: 0
    }
  },
  methods: {
    handleDelete (item) {
      this.$confirm('确定要删除此模板', '提示', {
        type: 'warning'
      }).then(() => {
        api.delTemplate({
          id: item.id
        }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetch()
        })
      })
    },
    fetch () {
      this.loading = true
      api.getTeachTemplateList({
        page: this.currentPage,
        rows: this.rows,
        courseId: this.$route.query.courseId || ''
      }).then((res) => {
        let rdata = res.data
        this.rows = rdata.rows
        this.total = rdata.total
        this.tempData = res.data
        let temp = this.tempData.list.filter(item => {
          return item.isSelected
        })
        if (temp.length) {
          this.template = temp[0]
        } else {
          this.template = this.tempData.list.find(item => {
            return item.isDefault
          })
        }
        this.loading = false
      })
    },
    handleSizeChange (size) {
      this.rows = size
      this.fetch()
    },
    handleCurrentChange (cp) {
      if (this.currentPage !== cp) {
        this.currentPage = cp
        this.fetch()
        this.template = {}
      }
    },
    setTeachTemplate () {
      if (!this.template.id) {
        this.$message('请选择一个模板')
        return false
      }
      api.setTeachTemplate({
        courseId: this.$route.query.courseId,
        teachingplanTemplateId: this.template.id
      }).then((res) => {
        this.$router.push({path: '/training/curriculum'})
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.teach-template{
  width: 100%;
  margin:26px 0 0 0;
}
.router-link:hover{
  color:#3983e5;
}
</style>
